<template>
    <van-icon :loading="loading" @click="onClick" :name="isLike === 1 ? 'good-job' : 'good-job-o'"
        :color="isLike === 1 ? '#e5645f' : ''" />
</template>

<script>
import { ref } from 'vue'
import { addLikeAPI, delLikeAPI } from '@/api/article'
import { Toast } from 'vant'
export default {
  name: 'likeAticle',
  props: {
    isLike: {
      type: Number,
      required: true
    },
    aticleId: {
      type: [Number, String, Object],
      required: true
    }
  },
  setup (props, content) {
    const loading = ref(false)
    const onClick = async () => {
      loading.value = true
      let status = -1
      try {
        if (props.isLike === 1) {
          // 已点赞 取消
          await delLikeAPI(props.aticleId)
          // 更新视图
        } else {
          // 未点赞 点赞
          await addLikeAPI(props.aticleId)
          // 更新视图
          status = 1
        }
        content.emit('up_attitude', status)
        Toast.success(props.isLike === 1 ? '取消点赞' : '点赞成功')
      } catch (err) {
        console.log(err)
      }
      loading.value = false
    }
    return {
      loading,
      onClick
    }
  }
}
</script>

<style scoped lang="less">

</style>
